This should be related to your video format or mime type issues.

Each browser supports different video format, MP4 is the recommended format. In general, it’s recommended to use constant frame rate. Detailed instructions about video encoding for HTML 5.

HTML5 is pickier about what video it can play than Flash.

Please note that MP4 is just a container, it might contain various streams for audio and video. You should check what audio and video stream are you using. Read next question to find out how.

1) This can happen if your site is at www.domain.com, but the CSS is loaded from your CDN at cdn.domain.com. Based on CSS3 and HTML5 specs not all the resources can be shared between domains.

So you need to set the following on your CDN for web fonts (woff, eot, ttf, svg):

Access-Control-Allow-Origin: *

Or you can allow your domain only (but in that case it might be good to also allow it with https):

Access-Control-Allow-Origin: http://www.domain.com

Or you can exclude wp-content/plugins/fv-wordpress-flowplayer/css/flowplayer.css from CDN.

2) Second cause might be that your webfonts are served with bad mimetype

By default the player is positioned in the middle. To change alignment of the player to either left or right:Go to FV Player settings > scroll down to post interface options > tick “Align”. Now you can insert your video. In the interface you can now choose you alignment from the drop down menu: default (middle), left, or right.You can check demo in here.

The video checker works automatically when you’re logged in as admin. You’ll see a text in upper left corner of any video on your site. All the necessary info can be found in this guide.

Most of the issues is caused by bad mime type on the server which serves your video files. Our plugin contains an automated checked for this – just click the “Check Videos” button on the plugin Settings screen.

Here’s how to fix the mime type:

If your videos are hosted on a standard server:

You need to put the following into your .htaccess:

If you use Microsoft IIS, add following into web.config (one should be in your root website folder) into configuration/system.webServer/staticContent section:

This can be also done in the Apache configuration. If you are on Microsoft IIS, you need to use the IIS manager.

If you host videos on Amazon AWS:

They might be served with bad mime type too – “application/octet-stream”. This largely depends on the tool which you use to upload your videos. Using your Amazon AWS Management Console, you can go though your videos and find file content type under the “Metadata” tab in an object’s “Properties” pane and fix it to “video/mp4” (without the quotes, of course different video formats need different mime type, this one is for MP4). There are also tools for this, like S3 Browser Freeware, good place for start is here: https://forums.aws.amazon.com/thread.jspa?messageID=224446

Good example can be seen in our support forum: https://foliovision.com/support/fv-wordpress-flowplayer/how-to/how-to-set-correct-mime-type-on-videos-hosted-by-amazon

Also for Internet Explorer, it’s not recommended to use MPEG-4 Visual or MPEG-4 Part 2 video stream codecs.

This means that the video information (such as what codecs are used) is not stored at the beginning of the file. In our experience, video with bad meta data position might be slow to load in Flash engine (check some browser which doesn’t play MP4 format in Flash – like Opera) and Firefox. Although Safary and iOS (iPAd, iPhone) may play it just fine.

In general we recommend you to re-encode your video as per our instructions, but here are some quick tools:

If you are using Mac, try Lillipot (just remember to rename the file back to .mp4 extension): http://www.qtbridge.com/lillipot/lillipot.html

If you have Quick Time Pro, just open the video and in the Movie Properties -> Video Track -> Other Settings turn on the “Cache (hint)” – screenshot.

If you are using Windows, try MP4 FastStart: http://www.datagoround.com/lab/

There are also server-side tools for fixing of this written in Python and there one for PHP, but it fails on videos bigger than the PHP memory limit.

Please check with your technical support if your web server supports HTTP range requests. Most of the modern web servers support this feature (Apache, Nginx, Lighttpd, Litespeed…). It’s important for fast seeking in HTML5 video playback.

Other possible cause is that you are using some membership plugin to protect downloading of your videos (Premise and others). While this might seem like a good solution, we don’t recommend it as it increases the load of your server and it won’t allow seeking in the videos. You can use Amazon S3 with privacy settings, just hit the link to read our illustrated guide.

We heard about problems when using some fancy pro templates like OptimizePress (read below for fixing instructions) or Gantry framework. These templates often break the WordPress conventions (probably as they often try to add too many non-template functions, like video support built-in into the template). We can debug the issues for you, just head over to our website and order the pro support.

Full list of conflicting plugins is available here: https://foliovision.com/player/compatibility

First click the “Check template” button on the pluging settings screen. It will likely report an issue like:

The problem with this template is that it includes that old Flowplayer library without using the proper WordPress function to add a new script (wp_enqueue_script). You need to go through the template and make sure the script is not loading. Typically it will be in any of the header.php files – including header-myheader.php, header-singleheader.php or similar files.

There is also a workaround – on each page what is using one of the OptimizePress custom templates, check Launch Page & Sales Letter Options –> Video Options –> “Activate Video” and enter “” into Launch Page & Sales Letter Options –> Video Options –> “External Player Code” field. That way the template thinks the video is external and will not try to put in the Flowplayer library and the video will play.

FV Flowplayer will handle all the videos inserted by the Live Edit.

Unfortunatelly HTML5 does not support live broadcasting. Please read about it here under “Flash. The good parts”: http://flowplayer.org/docs/#flash

You need to use at least PHP 5, your site is probably still running on old PHP 4.

This temporary file is required as our plugin contains a video checker for admin users – it checks the video format and other information and warns you about potential issues why your video might not play for everybody.

The error message means the WordPress media uploads directory (by default wp-content/uploads) is not writable by PHP. We use this standard WordPress path as it should work for nearly all the websites. Most of people use the standard WordPress Media Library, so this should really work.

You can try to set the permissions of that folder to allow writing for everybody and see if that helps. If you are not sure, ask your web host support about what PHP permission model you use.

Go to plugin Settings screen and hit “Check template” button. It will check if both jQuery library and Flowplayer JavaScript is loading properly.

Also, check “I’m using OptimizePress template” question above.

Please check if these issues also appear when using the default WordPress template. There seems to be some sort of conflict between the Flowplayer CSS and your theme CSS.

Are you using some old lightbox plugin like http://www.4mj.it/slimbox-wordpress-plugin/ ? Or are you putting the video into Iframe? Also, the video should not be placed in an HTML element with lowered z-index.

Just copy the plugin into wp-content/plugins and then activate it on each blog where you want to use it.

This option is not available. With autobuffer, it means every visitor on every visit to your page will be downloading the video. This means that you use a lot more bandwidth than on demand. I know that I actually watch the video on only about 1/3 of the pages with video that I visit. That saves you money (no bandwidth overages) and means that people who do want to watch the video and other visitors to your site get faster performance.If you want to autobuffer, you can turn that on in the options (we turn it off by default and recommend that it stays off).

Just enter the URL of your video hosted on Amazon S3 as the video source.

Currently there is no support for other languages.

You can change this manually in the the models/flowplayer.php in the flowplayer_head function. It you use videos in widgets you might need to edit the function flowplayer_content in controller/frontend.php as well. Please be carefull when editing source codes.

You need to use following code to include the shortcode into a sidebar:

echo apply_filters(‘the_content’, ‘[flowplayer src=yourvideo.mp4 width=240 height=320]’);

Fill the Flowplayer shortcode part according to your needs. The apply filter needs to be called because the flowplayer shortcodes are not parsen outside posts automatically. Also, please do not forget to add the echo at the beginning.

Check out .wpfp_custom_popup and .wpfp_custom_ad in /fv-wordpress-flowplayer/css/flowplayer.css. You might want to move your changes to your template CSS – make sure you use ID of container element, so your declarations will work even when the flowplayer.css is loaded later in the head section of your webpage.

Yes, there’s a global option in settings to disable sharing/embed. We plan to add an individual flag on a per video basis to allow sharing when sharing is turned off globally and vice versa.

You need to copy the CSS from the Flowplayer CSS (default theme) and put it into your theme CSS. Also add some element ID in front of it to make sure it overrides the default Flowplayer CSS:

The image needs to be 100x106px normal version nad 200x212px hi res version. You only have to include the RTL version if your site runs in such language.

Check out Settings -> FV Player -> Sitewide Flowplayer Defaults -> Logo.

Make sure you are not using obsolete tags like to wrap the video. Such tag is not supported in HTML5, you have to use CSS to center elements.

You can put this into your template’s functions.php file, if you know a bit of PHP. It will disable the tooltip.

Just put this code into the template’s functions.php file. If you know a bit of PHP, it should not be a problem for you:

It simply adds a class “play-button” to the player DIV element and then it knows to use the play button. The other options are:

Read our guide Using FV Player with Minify Plugins. There you’ll find how to set up plugins such as Autoptimize or WP Rocket so they work properly with the FV Player.

No worries.

The problem is probably in AdBlock. If it’s active, the overlay ads will be blocked. Once AdBlock is deactivated for the particular domain where the video is played, the overlay ads will be displayed (page refresh needed).

There is an possible issue with some themes: YouTube video opens in fullscreen, but after minimizing and opening fullscreen again, the video is shrinked in the left part of the screen (as in this example). You need to copy this CSS into your theme style sheet:

You can optionally edit your theme’s JS to prevent the shrinking.

FV Player Pro comes with a money back guarantee so you can even try the commercial no-branding version risk free. Or make it work first with the free versions.

Thank you for being part of the HMTL 5 mobile video revolution!